<template>
    <div>
        <a-card>
            <a-table :columns="columns" :data-source="page.list" rowKey="sourceId" bordered :pagination="false"
            :loading="loading">
            <template slot="sourceUrl" slot-scope="text,record">
                <a-button type="link" @click="handleSourcePreview(record)">查看资源</a-button>
            </template>
            <template slot="sourceType" slot-scope="text">
                <a-tag color="#f50" v-if="text == 1">
                   图片
                </a-tag>
                <a-tag v-else color="#61BFAD">
                   视频
                </a-tag>
            </template>
            <template slot="operation" slot-scope="text,record">
                <div class="editable-row-operations">
                    <a-popconfirm title="暂时不开放删除资源" ok-text="是的" cancel-text="不,我考虑一下" @confirm="deleteAdmin(record.id)">
                        <a-button disabled type="danger">
                            删除
                        </a-button>
                    </a-popconfirm>
                </div>
            </template>
			</a-table>
			<a-pagination v-model="page.currentPage" :page-size-options="['5','10','20','50']" :total="page.totalCount"
				show-size-changer :page-size="page.pageSize" @showSizeChange="onSizeChange" @change="onPageChange">
			</a-pagination>
        </a-card>
        <a-modal v-model="sourceModal.sourcePreivewVisible" :title="sourceModal.sourcePreviewTitle" @ok="handleOk">
            <div class="source-modal" v-if="sourceModal.currentSourceType === 1">
                <img :src="sourceModal.currentSourceUrl">
            </div>
            <div class="source-modal" v-else-if="sourceModal.currentSourceType === 2">
                <video type="video/mp4" controls :src="sourceModal.currentSourceUrl"></video>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {imageColumns as columns} from '@/assets/js/tableList/ResourceTable.js'
import {getSourceByPage,getSourceById} from '@/api/Resource.js'
export default {
    name: 'ImageList',
    data () {
        return {
            // 搜索栏
            loading: true,
            columns: [],
            // 资源预览对话框
            sourceModal: {
                sourcePreviewTitle: '图片预览',
                sourcePreivewVisible: false,
                currentSourceType: 1,
                currentSourceUrl: ''
            },
            // 自定义分页 page
            page: {
                currentPage: 1, // 当前页
                pageSize: 5, // 每页显示条数
                totalPage: 0, // 总页数
                totalCount: 0, // 总条数
                params: {}, // 查询参数对象
                list: [], // 数据
                sortColumn: '', // 排序列
                sortMethod: 'asc' // 排序方式
            },
        }
    },
    created () {
        this.initTable()
        this.getSourceList()
    },
    methods: {
        // 初始化 table 列表
        initTable () {
            this.columns = columns
        },
        async getSourceList() {
            const { data: res} = await getSourceByPage(this.page)
            // console.log(res)
            if (res.code !== 20005)
                return this.$message.error('查询出错')
            this.page = res.data
            // 消除不必要产生的查询参数
            this.page.index = undefined
            this.loading = false
            this.$message.success(res.msg)
        },
        // 页面变化
        onPageChange (newPage) {
            this.page.currentPage = newPage
            this.getSourceList()
        },
        // 页面变化
        onSizeChange(current, newSize) {
            this.page.pageSize = newSize;
            this.getSourceList()
        },
        // 资源预览
        async handleSourcePreview (scope) {
            const {data : res} = await getSourceById(scope.sourceId)
            if (res.code !== 20005)
                return this.$message.error('资源预览失败')
            console.log(res)                
            this.sourceModal.sourcePreviewTitle = scope.sourceType == 1 ? this.sourceModal.sourcePreviewTitle : '视频预览'
            this.sourceModal.currentSourceType = scope.sourceType
            this.sourceModal.sourcePreivewVisible = true
            this.sourceModal.currentSourceUrl = res.data.sourceUrl
            this.$message.success(res.msg)
            // console.log(res.sourceUrl)
        },
        handleOk() {
            this.sourceModal.sourcePreivewVisible = false;
        },
    }
}
</script>

<style scoped>
    .source-modal img {
        width: 400px;
        height: 300px;
        max-height: 500px;
        max-width:500px;
    }

    .source-modal video {
        max-height: 600px;
        max-width: 300px;
        height: 500px;
        widows: 200px;
    }
</style>